<template>
  <div>
    <div class="yx-dialog-puborder-mask J_yxDialogpuborderMask ">
      <div class="yx-dialog-puborder-box">
        <div class="yx-dialog-puborder-close J_yxDialogpuborderClose" @click="hideForm" title="关闭">
          ×
        </div>
        <div class="yx-dialog-puborder-head">
          <div class="yx-dialog-puborder-title">{{title}}</div>
        </div>
        <div class="yx-dialog-puborder-main">
          <div class="yx-dialog-puborder-form J_yxDialogpuborderForm">
            <div class="yx-dialog-puborder-formitem">
              <div class="yx-dialog-puborder-forminput">
                <div class="yx-dialog-puborder-text">
                  <span>我需要</span>
                  <input type="text" v-model="form.content"  name="titleValue" placeholder="请输入您的需求" class="J_yxDialogpubTltle">
                </div>
              </div>
            </div>
            <div class="yx-dialog-puborder-formitem">
              <div class="yx-dialog-puborder-forminput">
                <div class="yx-dialog-puborder-unlogin J_yxDialogpuborderUnlogin" style="display: block;">
                  <div class="yx-dialog-puborder-quicklogin">
                    <div class="yx-dialog-puborder-quicklogin-phone">
                      <input type="text" v-model="form.phone" name="modifyphone" placeholder="请输入手机号" maxlength="11">
                    </div>
                    <div class="yx-dialog-puborder-quicklogin-code">
                      <input type="text" name="modifyphone-yzm" placeholder="请输入验证码" v-model="form.yzm">
                    </div>
                    <a class="yx-dialog-puborder-button-getcode" :class="[telError ? 'disabled' : '']" href="javascript:;" @click="sendCode">{{codeText}}</a>
                </div>
              </div>
            </div>
            <div class="yx-dialog-puborder-formtips" style="margin-top: 20px">
              <span class="yx-dialog-puborder-tips J_DialogpuborderTips" style="display: inline;">手机号将自动注册账号，河南老衲电子科技依法保护您的隐私权益</span>
            </div>
            <div class="yx-dialog-puborder-formitem yx-dialog-puborder-formitem-agreement J_yxDialogPubAgreement" style="">
              <div class="yx-dialog-puborder-forminput">
                <label><input type="checkbox" name="yxDialogPubAgreementCheck" :checked="isAgree" @click="isAgree = !isAgree">已阅读并同意</label>
                <span class="J_yxDialogPubUserAgreement">《<a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=2">服务协议</a>》</span>
                <span class="J_yxDialogPubPrivacyAgreement">《<a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=444">隐私保护政策</a>》</span>
                <span class="J_yxDialogPubTradeAgreement">《<a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=422">交易协议</a>》</span>
              </div>
            </div>
            <div class="yx-dialog-puborder-formitem">
              <div class="yx-dialog-puborder-formsubmit">
                <span class="yx-dialog-puborder-button-submit J_yxDialogpuborderSubmit" @click="submitForm()">确认提交</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="yx-mpuborder-elasticframe">
      <div class="yx-mpuborder-mask">
        <div class="yx-mpuborder-box">
          <div class="yx-dialog-mpuborder-bg">
            <div class="yx-mpuborder-close J_yxDialogPubpsaapexClose" @click="hideForm" title="关闭">×</div>
            <div class="yx-dialog-mpuborder-main">
              <div class="yx-dialog-mpuborder-top">{{title}}</div>
              <div class="yx-mpuborder-hd J-yx-mpuborder-hd">
                <div class="yx-mpuborder-formitem yx-mpuborder-formitem-gary"><label
                  class="yx-mpuborder-formlabel">我需要</label>
                  <div class="yx-mpuborder-forminput">
                    <input type="text" v-model="form.content" class="J_yxDialogpubTltle" placeholder="请输入您的需求"></div>
                </div>
              </div>
              <div class="yx-mpuborder-bd">
                <div class="yx-mpuborder-formitem-box J_yxmpuborderForm">
                  <div class="J_yxmpuborderUnlogin yx-mpuborder-unlogin-box">
                    <div class="yx-mpuborder-formitem yx-mpuborder-formitem-gary">
                      <div class="yx-mpuborder-forminput">
                        <div class="J-yx-mpuborder-unlogin">
                          <input type="text" name="modifyphone" v-model="form.phone" placeholder="请输入手机号" maxlength="11"></div>
                      </div>
                    </div>
                    <div class="yx-mpuborder-formitem J-yx-mpuborder-unlogin yx-mpuborder-formitem-gary">
                      <div class="yx-mpuborder-forminput">
                        <div class="yx-mpuborder-quicklogin-code">
                          <input type="text" name="modifyphone-yzm" v-model="form.yzm" placeholder="请输入验证码" maxlength="6">
                          <a class="yx-mpuborder-button-getcode" :class="[telError ? 'disabled' :'']" href="javascript:;" @click="sendCode"> {{codeText}} </a>
                        </div>
                      </div>
                    </div>
                   </div>

                  <div class="yx-mpuborder-formitem-agreement J_yxmpuborderAgreement" style="">
                    <label><input type="checkbox" name="yxmpuborderAgreementCheck" :checked="isAgree" @click="isAgree = !isAgree">我已阅读并同意河南老衲电子科技</label>
                    <span class="J_yxmpuborderUserAgreement">
                      <a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=2">《服务协议》</a>
                    </span>
                    <span class="J_yxmpuborderPrivacyAgreement">
                      <a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=444">《隐私保护政策》 </a>
                    </span>
                    <span class="J_yxmpuborderTradeAgreement">
                      <a target="_blank" href="https://rule.zbj.com/ruleshow-0?pid=422">《网络服务交易协议》</a>
                    </span>
                  </div>
                  <div class="yx-mpuborder-formsubmit">
                    <span class="yx-mpuborder-button-submit J_yxmpuborderSubmit" @click="submitForm()"> 确认提交</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '@/api/mixins.js'
  export default {
    name: "bottomForm",
    mixins:[mixin],
    props:{
      title:{
        type:String,
        default:''
      },
      content:{
        type:String,
        default:''
      }
    },
    mounted(){
      if(this.content){
        this.$set(this.form,'content',this.content)
      }
    },
    methods:{
      hideForm(){
        this.$emit('hideForm')
      }
    }
  }
</script>

<style scoped>
  .yx-mpuborder-elasticframe{
    display: none;
  }
  @media only screen and (max-width: 1000px) {
    .yx-dialog-puborder-mask{
      display: none;
    }
    .yx-mpuborder-elasticframe{
      display: block;
    }
  }
</style>
